Rodrigo

Hi, It should actually look like this: "dependencies": { "gsap": "npm:@gsap/business@^3.12.5", ... } You're not getting any errors when installing the GSAP bonus package? This "npm:@gsap/member@^3.12.5" With member in it is very odd, actually there is no package in our repo with that as far as I can tell. You should run this: npm install gsap@npm:@gsap/business Try removing that gsap dependency, delete your package-lock.json file, create an .npmrc file and then try to install using the instructions here: https://gsap.com/docs/v3/Installation Hopefully this helps. Happy Tweening!

Hey Jordan, Sorry about the issues. I just created a new Nuxt project with NPX and the GSAP Business package without any issues: https://github.com/rhernandog/nuxt3-gsap-bonus-netlify/tree/master https://calm-torte-bf0b7c.netlify.app/ Maybe you could try a brand new project like mine, create your npmrc file with the token for installing locally (before pushing to the repo), then replace the token with the environmental variable and then push to the repo and run the deploy in Netlify. Then you could copy/paste your files into this project. As Cassie suggests, maybe ditch the .env files in your setup and just use the npmrc file as I suggested: use the token for installing locally, then update with env variable you'll use in netlify and only then push to the repo. PS: I removed the loom link because you were showing your private token at some point in the GSAP installation page (not the npmrc file). Hopefully this helps. Happy Tweening!

Hi, I tested on an android phone that is not extremely powerful and everything looks OK to me on chrome and firefox 🤷‍♂️

Hi, Just tween the Timescale property of a GSAP instance: https://gsap.com/docs/v3/GSAP/Tween/timeScale() Something like this (use left-right arrows in your keyboard) https://codepen.io/GreenSock/pen/MWdYdPe Hopefully this helps. Happy Tweening!

Hi, The onEnter/Leave/Toggle callbacks work based on the start/end points you define in your ScrollTrigger configuration: https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#onEnter https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#onToggle https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#start https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#end The element that you want to pin will become pinned once the start of the trigger passes the start of point, so for example if you have start: "top top" that means when the top of the trigger element gets to the top of the viewport. Same with the end point as you can see in the docs. That's why there is no need for onPinned and onUnpinned callbacks, since those will fire at the same time that other callbacks fire so it will be some redundancy in the API. I strongly recommend you to go through the docs and experiment with simple setups in order to understand how the callback system works. Hopefully this clear things up. Happy Tweening!

Hi, The issue is definitely not related to GSAP but something else in your setup (most likely CSS). I forked and simplified your demo to work with a click event in the window with the text being visible at all times, when you click the SplitText instance is created then animated and when the animation is completed, the SplitText is reverted: https://codepen.io/GreenSock/pen/KKLwQZp As you can see everything is working as expected. Maybe going from display none to flex could be causing this, but as you can see is definitely not a problem with the way GSAP and SplitText are working. Hopefully this helps. Happy Tweening!

Hey Fernando! Indeed this is mostly about JS logic. What you have to do is check if a previous element exists in the array based on the current index value inside a forEach loop: const elements = gsap.utils.toArray(".list-element"); elements.forEach((element, i) => { const previousElement = elements[i - 1]; // undefined for 0 if (previousElement) { // Create your animations for current and previous the elements, in/out } else { // Set the initial state (visible) of the first element } }); Checking for the previous element guarantees that the out animation won't be created for the last element and the in animation won't be created for the first one. I simplified the demo to remove the nested loops with just one set of elements: https://codepen.io/GreenSock/pen/pomvabo Hopefully this helps. Happy Tweening!

Hi @Umberto, Maybe this demos can help: https://codepen.io/GreenSock/pen/bGZKWjp https://codepen.io/GreenSock/pen/poBRQRj Also this thread by @mvaneijgen has great information on the stacking cards effect subject: Hopefully this helps. Happy Tweening!

Hi, Maybe you're looking for ScrollTrigger's Batch method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch() Hopefully this helps. Happy Tweening!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/YzbPYMx Hopefully this helps. Happy Tweening!

Hi @CamiMarie and welcome to the GSAP Forums! I'm very far from being an experienced wordpress developer, in fact I know very little about it, so I couldn't really tell you what to do. Maybe if you have access to the template create a unique id or class that you can use as a selector in your code. Sorry I can't be of more assistance. Happy Tweening!

Hi @Ayush3513 and welcome to the GSAP Forums! That's basically a CSS issue rather than a GSAP one. You're using the scroller config in ScrollTrigger, that basically tells ScrollTrigger to look for the scroll position in that element, by default ScrollTrigger will look for the scroll position in the main window element. Then your main element doesn't have a fixed height so it stretches out to the height of it's children, because of that there is no scroll inside that element. There are two options: Use the default scroller in your ScrollTrigger configuration: gsap.to("#page2 #box2", { x: 400, y: 400, duration: 4, scrollTrigger: { trigger: "#page2 #box2", markers: true, scrub: 2 } }); https://codepen.io/GreenSock/pen/vYwEXRZ Give your main element a height of 100vh: .main { height: 100vh; overflow: auto; } https://codepen.io/GreenSock/pen/rNgaMvB Hopefully this helps. Happy Tweening!

Hi, Actually they're using clip-path inset with round: clip-path: inset(4rem 20% round 1rem 2rem 3rem 4rem); https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/inset If you inspect with devtools you'll see this: element.style { clip-path: inset(2.87718% round 20.2554px); } You should have a look at this thread: Hopefully this helps. Happy Tweening!

Hi, This post by @PointC has an excellent demo for achieving that: Happy Tweening!

Hi, The only Easing functions that accept values that are not documented are Back and Elastic. In the case of the Back easing function the value is pretty simple: gsap.to(target, { duration:1, ease: "back.in(1)", }); The bigger the value, the back easing (in/out) is bigger as well. The Ease Visualizer has dropdowns so you can play around and check that for yourself: For the elastic easing function the first value is for the strength the elastic motion will have, for smaller values the stretching (for lack of a better word) or overshoot is larger: In the second parameter I'm a little fuzzy in terms of what it actually is or how to correctly call it. The simplest way I can use to describe it is the frequency (repetitions) that leads to the ease to either increase (ease in) from a linear easing, or decrease (ease out) to a linear easing, based on the progress of the tween, that's why those values range between 0 and 1. Any other easing function that takes values is documented in our docs: Hopefully this helps. Happy Tweening!